<template>
  <div>
    <el-row :gutter="20">
        <el-col :span="6">
                <div class="top grid-content bg-purple t1">
                    <div class="text">
                        <p class="title">学生总数</p>
                        <p class="num">3250</p>
                        <p class="add">20天内增加80%</p>
                    </div>
                    <div class="right">
                        <el-progress type="circle" :width="80" :height="80"
                        :text-inside="true" color="#11cbca" :stroke-width="10" :percentage="80">
                        </el-progress>
                        <!-- <i class="el-icon-user icon"></i> -->
                        <img class="p-pic1" src="../../../assets/img/home/t1.png" alt="">
                    </div>
                    
                </div>
            </el-col>

    <el-col :span="6">
                    <div class="top grid-content bg-purple t2">
                        <div class="text">
                            <p class="title">新生</p>
                            <p class="num">230</p>
                            <p class="add">25天之内增加50%</p>
                        </div>
                        <div class="right">
                            <el-progress type="circle" :width="80" :height="80"
                            :text-inside="true" color="#ffbc53" :stroke-width="10" :percentage="80">
                            </el-progress>
                            <!-- <i class="el-icon-user icon"></i> -->
                            <img class="p-pic2" src="../../../assets/img/home/t2.png" alt="">
                        </div>
                        
                    </div>
                </el-col>
    <el-col :span="6">
                    <div class="top grid-content bg-purple-light t3">
                        <div class="text">
                            <p class="title">总课程</p>
                            <p class="num">35</p>
                            <p class="add">20天内增加76%</p>
                        </div>
                        <div class="right">
                          <el-progress type="circle" :width="80" :height="80"
                        :text-inside="true" color="#9269ff" :stroke-width="10" :percentage="76"></el-progress>
                        <!-- <i class="el-icon-user icon"></i> -->
                        <img class="p-pic3" src="../../../assets/img/home/t3.png" alt="">
                        </div>
                        
                    </div>
                </el-col>
<el-col :span="6">
                <div class="top grid-content  bg-purple-light t4">
                    <div class="text">
                        <p class="title">收费</p>
                        <p class="num">35500</p>
                        <p class="add">30天内增加56%</p>
                    </div>
                    <div class="right">
                      <el-progress type="circle" :width="80" :height="80"
                     :text-inside="true" color="#4496ff" :stroke-width="10" :percentage="56"></el-progress>
                      <!-- <i class="el-icon-user icon"></i> -->
                      <img class="p-pic4" src="../../../assets/img/home/t4.png" alt="">
                    </div>
                    
                </div>
            </el-col>


    </el-row>
  </div>
</template>

<script>

export default {
    
}
</script>

<style lang="less" scoped>

  .el-row {
    margin-bottom: 20px;
    
  }
  .el-col {
    border-radius: 20px;
  }
  .bg-purple-dark {
    background: #fff;
  }
  .bg-purple {
    background: #fff;
  }
  .bg-purple-light {
    background: #fff;
  }
  .top {
    border-radius: 10px;
    min-height: 36px;
    padding: 20px 20px;
    display: flex;
    justify-content: space-between;
  }
  
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .t1{
    color: #11cbca;
  }
  .t2{
    color:#ffbc53;
  }
  .t3{
    color:#9269ff;
  }
  .t4{
    color:#4496ff;
  }
  .title{
    font-size: 14px;
  }
  .num{
    font-size: 30px;
    margin: 10px 0;
  }
  .right{
    position: relative;
  }
  .add{
    font-size: 10px;
  }
  // .icon{
  //   position: absolute;
  //   top: 33px;
  //   right: 33px;
  //   font-size: 60px;
  // }
  .p-pic1{
    height: 30px;
    position: absolute;
    top: 25px;
    right: 25px;
    font-size: 60px;

  }
  .p-pic2{
    height: 30px;
    position: absolute;
    top: 25px;
    right: 26px;
    font-size: 60px;

  }
  .p-pic3{
    height: 30px;
    position: absolute;
    top: 25px;
    right: 20px;
    font-size: 60px;

  }
  .p-pic4{
    height: 30px;
    position: absolute;
    top: 25px;
    right: 27px;
    font-size: 60px;

  }
 

</style>
